<template>
	<view class="wrapper">
		<head-title titleText="缘分"></head-title>
		<scroll-view upper-threshold="10" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" class="scrollPage" scroll-y :style="{height:windowH+'px'}">
			<view class="tabCont flex_row">
				<view @click="bindTab(index)" :class="{active:tab==index}" class="tab flex_col" v-for="(item,index) in tabList" :key="index">
					<view>{{item}}</view>
				</view>
			</view>
			<view class="cont flex_row">
				<view @click="bindUser(item.uid)" class="user" v-for="(item,index) in luckList" :key="index">
					<view class="userBox">
						<image lazy-load="true" :src="item.avatarurl" mode="aspectFill"></image>
						<view class="msg">
							<view class="name">{{item.nickname}}</view>
							<!-- <view class="explain">
								<text v-if="item.profile!=''">{{item.profile}}</text>
								<text v-else>这个人很懒，什么也没有留下</text>
							</view> -->
							<view class="other flex_row">
								<text>{{item.last_time}}</text>
								<text v-if="freeStyle==1">{{item.juli_str}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<load :loading="loading" :loadTxt="loadTxt"></load>
		</scroll-view>
	</view>
</template>
<script>
	import common from "../common/network.js";
	import headTitle from "./headTitle.vue";
	import load from "./load.vue";
	export default {
		name:'luck',
		components:{headTitle,load},
		props:{
			luckList:Array,
			loading:{
				default:false,
				type:Boolean
			},
			loadTxt:{
				default:'',
				type:String
			},
			tab:{
				default:0,
				type:Number
			},
			freeStyle:{
				default:'',
				type:String
			}
		},
		data(){
			return{
				windowH:0,
				tabList:['离我最近','最新活跃','颜值排行'],
			}
		},
		onLoad:function(){
			let that = this;
			common.network.getHeight(function(H,W){
				var windowH = (H - W/750 * 242);
				that.windowH = windowH;
			})
		},
		methods:{
			bindTab:function(index){
				this.$emit('bindluckTab',index)
			},
			bindUser:function(id){
				this.$emit('bindUser',id)
			},
			scrolltolower:function(){
				this.$emit('lucktolower')
			},
			scrolltoupper:function(){
				this.$emit('scrolltoupper')
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F9F7FA;
	}
	.tabCont{
		font-size: 30px;
		margin-bottom: 20px;
		box-shadow: 0 1px 10px #e1e1e1;
	}
	.tab{
		width: 33.33333%;
		height: 88px;
		justify-content: center;
		position: relative;
		transition: all 0.4s;
	}
	.tab:after{
		content: '';
		height: 6px;
		width: 0;
		background: transparent;
		position: absolute;
		bottom: 0;
		left: 50%;
		transition: all 0.4s;
	}
	.tab.active{
		color: #676BF3;
	}
	.tab.active:after{
		background: #676BF3;
		width: 100%;
		left: 0;
	}
	.tab view{
		width: 100%;
		position: relative;
		text-align: center;
	}
	.tab view:after{
		content: '';
		height: 100%;
		width: 1px;
		background: #f1f1f1;
		position: absolute;
		top: 0;
		right: 0;
	}
	.cont{
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.user{
		width: 48.6%;
		box-sizing: border-box;
		color: #8D8D8D;
		font-size: 28px;
		margin-bottom: 20px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		box-shadow: 0 0 10px #e5e5e5;
	}
	.userBox{
		background: #fff;
	}
	.user image{
		width: 100%;
		height: 380px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.msg{
		padding: 10px 12px;
		padding-top: 8px;
	}
	.name{
		color: #353535;
		font-size: 32px;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.explain{
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 8px 0;
	}
	.other{
		justify-content: space-between;
		font-size: 26px;
		padding-top: 10px;
	}
</style>
